<template>
  <section class="component case-excel-import">
    <el-form ref="form" :model="importModel" label-width="150px" :rules="rules">
      <el-form-item label="委托方" prop="principalId">
        <el-select placeholder="请选择" v-model="importModel.principalId" @change="getTemplate">
          <el-option v-for="item in principalList.content" :label="item.name" :value="item.id" :key="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模板名称" prop="templateId">
        <el-select placeholder="请选择" v-model="importModel.templateId">
          <el-option v-for="item in templateList" :label="item.name" :value="item.templetId" :key="item.templetId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上传文件">
        <file-upload ref="upload_case_import" :fileList.sync="fileList" :fileNumberLimit="1" :AllowExtension="['xlsx','xls']"></file-upload>
      </el-form-item>
    </el-form>
    <div class="operate-buttons">
      <el-button @click="emitClose">取消</el-button>
      <el-button @click="submit">确定</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import { Dependencies } from '~/core/decorator';
import { State, Getter, Action, namespace } from 'vuex-class';
import { Emit, Component } from 'vue-property-decorator';
import FileUpload from '~/components/common/file-upload.vue';
import { DataImportExcelInfoService } from '~/services/dataimp-service/data-import-excel-info.service';
import { PageService } from '~/utils/page.service';


@Component({
  name:"case-excel-import",
  components: {
    FileUpload
  }
})
export default class CaseExcelImport extends Vue {
  @State private principalList: any;
  @Dependencies(DataImportExcelInfoService) private importExcelService: DataImportExcelInfoService;

  private importModel: any = {
    id: '', // 委托方ID
    delegationDate: '', // 委案日期
    closeDate: '', // 结案日期
    fileId: '', // 文件id
    templateId: '',
    memo: '', // 备注
    companyCode: '',
    principalId: '',
    principalName: '',
    recoverWay: 0,
  };
  private templateList: any[] = [];
  private rules: any = {
    principalId: [{ required: true, message: '请选择委托方' }],
    templateId: [{ required: true, message: '请选择模板名称' }],
  };
  private fileList: any = [];

  @Emit("close")
  private emitClose() {
    const upload: any = this.$refs['upload_case_import'];
    upload.reset();
    const dataform: any = this.$refs['form'];
    dataform.resetFields();
  }

  @Emit("success")
  private emitSuccess() {
    this.$message.success('案件正在后台导入,请等待数据刷新');
    this.emitClose()
  }


  // 获取模板
  private getTemplate() {
    this.importModel.templateId = '';
    this.importExcelService.findTempletByPrincipalId({
      principalId: this.importModel.principalId,
    }).subscribe((data) => {
      this.templateList = data;
    });
  }

  private submit() {
    if (this.fileList.length === 0) {
      this.$message('请上传导入文件');
      return;
    }
    // 存储文件ID
    this.importModel.fileId = this.fileList[0].response.id;
    // 委托方名称
    const principal = this.principalList.content.find(
      (v) => v.id === this.importModel.principalId,
    );
    this.importModel.principalName = principal ? principal.name : '';
    const dataForm: any = this.$refs['form'];
    dataForm.validate((valid) => {
      if (!valid) return
      this.importExcelService.importExcelData(this.importModel).subscribe(this.emitSuccess);
    });
  }
}
</script>

